{% extends "grid/base.html" %}

{% load i18n page_metadata_tags %}

{% block metadata %}
    {% translate "Add a package to Grid " as trans_title %}
    {% page_metadata page_title=trans_title|add:grid.title %}
{% endblock metadata %}

{% block body %}

    {% url 'grid' grid.slug as grid_url %}
    <h2><a href="{% url 'home' %}">{% translate "home" %}</a> / <a href="{% url 'grids' %}">{% translate "grids" %}</a> / {% blocktranslate with grid_title=grid.title %}Add a package to grid '<a href="{{ grid_url }}">{{ grid_title }}</a>'{% endblocktranslate %}</h2>

    <form action="{{ request.PATH }}" method="post" id="grid-package-form">
        {% csrf_token %}
        <fieldset>
            <input id="search-field" type="text" name="q" value="search packages" autocomplete="off" />
            <input name="package" id="package-field" value="0" type="hidden" />
            <div id="target-parent"><div id="target"></div></div>

        </fieldset>

    </form>

    <h3>What if the Package isn't in the database?</h3>

    <p><a class="btn btn-default" href="{% url 'add_new_grid_package' grid.slug %}">{% translate "How about adding it? »" %}</a></p>

{% endblock body %}

{% block extra_body %}
    <script type="text/javascript">
        $(function() {

            $('input#search-field').focus();

            var timer = null;
            $('input#search-field').keyup(function() {
                var search_text = $('input#search-field').val();
                var search_url = '{% url 'ajax_package_list' %}?q=' + search_text + '&grid={{ grid.slug }}';

                // Short delay so keystrokes don't pound search URL
                if(timer) {
                    window.clearTimeout(timer);
                }

                timer = window.setTimeout(function() {
                    $.get(search_url, function(data) {
                        $('#target').fadeTo('fast', 0.3, function() {
                            $('#target').html(data);
                            $('#target').fadeTo('slow', 1.0);
                        });
                    });
                }, .4 * 1000);
            });

            // Ignore 'enter' key if pressed
            $("#grid-package-form").keypress(function(e) {
                if (e.which == 13) {
                    return false;
                };
            });

        });
    </script>
{% endblock extra_body %}
